---
import Sandpack from "./Sandpack";

let {
  editorHeight = 230,
  previewAspectRatio = 16 / 9,
  stacked,
  reversed,
  ...props
} = Astro.props as Props;

if (typeof editorHeight === 'number') editorHeight = `${editorHeight}px`;
---

<style is:global define:vars={{ previewAspectRatio, editorHeight }}>

  .sp-container {
    margin-top: 1.25rem;
    margin-bottom: 1.25rem;
  }

  @media (min-width: 768px) {
    .sp-container {
      height: var(--editorHeight) !important;
    }
  }

  .sp-container.sp-stacked {
    padding-bottom: calc(1 / var(--previewAspectRatio) * 100% + 50px + var(--editorHeight));
    width: 100%;
    height: 0;
    position: relative;
    overflow: hidden;
  }

  .sp-container.sp-stacked > astro-island {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
  }

  .sp-resize-handler {
    position: absolute;
    background: var(--theme-bg);
    width: 5px !important;
    left: calc(50% - 5px);
    top: 0;
    bottom: 0;
  }

  .sp-stacked .sp-resize-handler {
    display: none;
  }

  .sp-pre-placeholder {
    margin-top: 0;
    border-radius: 0;
    height: var(--editorHeight) !important;
    background: var(--theme-code-bg) !important;
    color: var(--theme-code-text) !important;
    font-family: var(--font-mono) !important;
    font-size: 13px !important;
    line-height: 20px !important;
    -webkit-font-smoothing: antialiased;
  }

  .sp-tabs {
    background: var(--theme-code-bg) !important;
    border-bottom: 1px solid var(--sp-colors-surface2, var(--theme-divider));
  }

  .sp-tabs-scrollable-container {
    padding: 0 var(--sp-space-2, 8px);
    overflow: auto;
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    min-height: 40px;
    margin-bottom: -1px;
  }

  .sp-tab-button {
    padding: 0 var(--sp-space-2, 8px);
    height: var(--sp-layout-headerHeight, 40px);
    white-space: nowrap;
    font-size: 12px !important;
  }

  div:where(.sp-preview-actions) {
    display: none; /* hide until Sandpack JS styles are loaded */
  }

  .sp-wrapper {
    height: 100% !important;
  }

  .sp-layout {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    background-color: var(--theme-bg) !important;
    border-radius: 0 !important;
    border: none !important;
    height: 100% !important;
  }

  .sp-stacked .sp-layout {
    flex-direction: column !important;
  }

  .sp-stacked.sp-reversed .sp-layout {
    flex-direction: column-reverse !important;
  }

  .sp-stacked .sp-editor {
    min-width: 100%;
    flex: 0 1 var(--editorHeight) !important;
  }

  .sp-stacked .sp-preview {
    min-width: 100%;
    flex: 1 1 auto;
  }

  .sp-preview {
    --sp-colors-surface1: var(--theme-bg);
    --sp-colors-surface2: var(--theme-bg);
    height: 100% !important;
  }

  .sp-preview-container {
    background: none !important;
  }

  .sp-preview-iframe {
    color-scheme: initial !important;
  }

  .sp-bridge-frame {
    display: none;
  }
</style>

<div class={`sp-container${stacked ? ' sp-stacked' : ''}${reversed ? ' sp-reversed' : ''}`}>
  <Sandpack
    client:load
    editorHeight={editorHeight}
    {...props}
  />
</div>

<script>
  // Allow autoplay and fullscreen in Sandpack previews
  const observer = new MutationObserver((mutationList) => {
    const iframe = mutationList[0].target;
    if (!iframe.allow.includes(' autoplay; fullscreen;')) {
      iframe.allow += ' autoplay; fullscreen;';
      iframe.src = iframe.src;
    }
  });
  observer.observe(document, { subtree: true, attributes: true, attributeFilter: ['allow'] });
</script>
